<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding: 0px;
                margin:0px;
            }
            .d1{
                width:400px;
                height: 400px;
                border:1px solid red;
                margin-left:400px;
                position: relative;
            }
            .d2{
                width:130px;
                height: 130px;
                border:1px solid blue;
                margin-left:100px;
                position: relative;

            }
            .d3{
                width:60px;
                height:60px;
                border:1px solid mediumpurple;
                /*相对于；离自己最近的非static定位的祖先元素*/
                position:absolute;
                top:30px;
                left:30px;
            }
        </style>
    </head>
    <body>
        <div class="d1">
            <div class="d2">
                <div class="d3"></div>
            </div>
        </div>
    </body>
</html>